<template>
    <div class="wxc-minibar" :style="{ backgroundColor: backgroundColor }" v-if="show">
        <div class="left" @click="leftButtonClicked" aria-label="返回" :accessible="true">
            <slot name="left">
                <image :src="leftButton" class="left-button"></image>
            </slot>
        </div>
        <div class="middle" >
            <slot name="middle">
                <input
                        @blur="onBlur"
                        @focus="onFocus"
                        @input="onInput"
                        @return="onSubmit"
                        @change="onChange"
                        :autofocus="autoFocus"
                        :disabled="disabled"
                        :value="inputValue"
                        :maxlength="maxLength"
                        ref="search-input"
                        class="search-input" :placeholder="inputPlaceholder"/>
                <image class="close"
                       @click="closeClicked"
                       v-if="showClose" :aria-hidden="true"
                       :src="close_icon"></image>
            </slot>
        </div>
        <div class="right" @click="rightButtonClicked">
            <slot name="right">
                <image class="right-button"
                       :src="rightButton"></image>
            </slot>
        </div>
    </div>
</template>

<style scoped>
    .wxc-minibar {
        width: 750px;
        height: 90px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #d81e06;
    }

    .left {
        padding-left: 32px;
        padding-right: 32px;
    }

    .right {
        padding-left: 32px;
        padding-right: 32px;
    }

    .left-button {
        width: 21px;
        height: 36px;
    }

    .right-button {
        width: 42px;
        height: 42px;
    }

    .middle {
        flex: 1;
        position: relative;
    }

    /*输入框*/
    .search-input {
        padding-left: 10px;
        padding-right: 44px;
        height: 70px;
        background-color: transparent;
        placeholder-color: #333333;
        border-bottom-width: 1px;
    }

    input.search-input:focus {
        outline: 0;
    }

    .close {
        position: absolute;
        right: 10px;
        top: 0;
        margin-top: 16px;
        width: 32px;
        height: 32px;
    }

</style>

<script>

    import {search_icon, close_icon, left_icon} from '../../baseConfig';
    const modal = weex.requireModule('modal');
    export default {
        name: "search",
        props: {
            backgroundColor: {
                type: String,
                default: '#d81e06'
            },
            leftButton: {
                type: String,
                default: left_icon
            },
            rightButton: {
                type: String,
                default: search_icon
            },
            show: {
                type: Boolean,
                default: true
            },
            close_icon: {
                type: String,
                default: close_icon
            },
            maxLength: {
                type: Number,
                default: 20
            },
            autoFocus: {
                type: Boolean,
                default: true
            },
            disabled: {
                type: Boolean,
                default: false
            },
            inputPlaceholder:{
                type: String,
                default: '请输入要搜索的书名或作者'
            },
            value:{
                type: String,
                default: '系统'
            }
        },
        data() {
            return {
                showClose:  false,
                showCancel:  true,
                inputValue: '',
            }
        },
        mounted(){
            this.inputValue = this.value;
        },
        methods: {
            leftButtonClicked() {
                const self = this;
                this.$router.go(-1);
                self.$emit('wxcMinibarLeftButtonClicked', {});
            },
            rightButtonClicked() {
                const self = this;
                self.autoBlur();
                if(!self.inputValue){
                    modal.toast({ message: self.inputPlaceholder });
                    return ;
                }
                self.$emit('wxcMinibarRightButtonClicked', {value: self.inputValue});
            },
            onBlur() {
                const self = this;
                setTimeout(() => {
                    self.showCancel = false;
                    self.detectShowClose();
                }, 10);
            },
            autoBlur() {
                this.$refs['search-input'].blur();
            },
            onFocus() {
                if (this.isDisabled) {
                    return;
                }
                this.showCancel = true;
                this.detectShowClose();
            },
            closeClicked() {
                this.inputValue = '';
                this.showClose && (this.showClose = false);
            },
            onInput(e) {
                this.inputValue = e.value;
                this.showCancel = true;
                this.detectShowClose();
            },
            onSubmit(e) {
                this.onBlur();
                this.inputValue = e.value;
                this.showCancel = true;
                this.detectShowClose();
            },
            onChange() {
                this.rightButtonClicked()
            },
            detectShowClose() {
                this.showClose = (this.inputValue.length > 0) && this.showCancel;
            },
            setValue(value) {
                this.inputValue = value;
            },
        }
    };
</script>
